<template>
    <div>
        <h1>房型显示</h1>
        房型名称
        <input type="text" v-model="quinfo.name" >
        房型区间
        <input type="text" v-model="quinfo.mian1" >
        <input type="text" v-model="quinfo.mian2">
        <input type="button" value="查询" @click="show">
        <table class="table table-bordered">
            <tbody>
                <tr>
                    <td>房间名称</td>
                    <td>门市价</td>
                    <td>房型面积</td>
                    <td>可住人数</td>
                    <td>图片</td>
                    <td>介绍</td>
                    <td>操作</td>
                </tr>
                <tr v-for="item in data.list" :key="item.id">
                    <td>{{ item.name }}</td>
                    <td>{{ item.price }}</td>
                    <td>{{ item.mian }}</td>
                    <td>{{ item.ren }}</td>
                    <td>
                        <img
              
              :src="item.img"
              width="60"
              height="60"
              alt=""
            />
                    </td>
                    <td>{{ item.jie }}</td>
                    <td></td>
                </tr>
            </tbody>
        </table>
    </div>
    <span>总共{{ data.totalCount }}条</span>
    <span>总共{{ data.totaPage }}页</span>
    <span>
        当前{{ quinfo.pageindex }} / {{ data.totapage }}
    </span>
    <input type="button" value="首页" @click="gitlist(1)">
    <input type="button" value="上一页" @click="gitlist(quinfo.pageindex-1)">
    <select v-model="quinfo.pageSize" @change="show">
        <option :value="item" v-for="item in arr" :key="item">
          每页显示{{ item }}条
        </option>
      </select>
    <input type="button" value="下一页" @click="gitlist(quinfo.pageindex+1)">
    <input type="button" value="尾页" @click="gitlist(data.totaPage)">

</template>

<script setup lang="ts">
import { ref,reactive,onMounted } from "vue";
import {useRoute,useRouter} from 'vue-router'
import axios from 'axios'
import 'bootstrap/dist/css/bootstrap-theme.css'
let router=useRouter();

let quinfo=reactive({
      "name": "",
      "price": 0,
      "ya": "",
      "mian": 0,
      "ren": 0,
      "jia": "",
      "img": "",
      "vr": "",
      "jie": "",
      mian1:"",
      mian2:"",
      pageindex:1,
      pageSize:2
})
let arr = ref([2, 4, 6, 8]);
let data:any=reactive({
    list:[],
    totalCount:0,
    totaPage:0
})
const gitlist=(num:any)=>{
    if (num < 1) {
    quinfo.pageindex = 1;
    return;
  }
  if (num > data.totapage) {
    quinfo.pageindex = data.totapage;
    return;
  }
  quinfo.pageindex = num;
  show();
}

onMounted(()=>{
    show();
})
const show=()=>{
    axios({
        url:'https://localhost:7098/api/FangXing/fangXings',
        method:'get',
        params:quinfo
    })
    .then((res)=>{
        console.log(res);
        data.list=res.data.list;
        data.totalCount=res.data.totalCount;
        data.totaPage=res.data.totaPage;

    })
    .catch((err)=>{
        console.log(err);
    })
}
</script>

<style scoped>

</style>